<template>
    <view>
        <!-- pages/store/store.wxml -->
        <view class="search">
            <van-search v-model="name" placeholder="请输入搜索关键词" use-action-slot>
                <view slot="action" @tap="search">搜索</view>
            </van-search>
        </view>
        <view class="container" :style="isIpx ? 'padding-bottom:168rpx' : 'padding-bottom:120rpx'">
            <block v-if="MainList.length">
                <!-- 列表 -->
                <view class="list">
                    <view class="item" v-for="(item, index) in MainList" :key="index">
                        <view class="top">
                            <view class="img">
                                <image :src="item.headImg" preview-size="200rpx" mode="widthFix" style="height: 50rpx"></image>
                                <view :class="item.status === 0 ? 'status green' : item.status === 1 ? 'status yellow' : 'status gray'">
                                    {{ item.status === 0 ? '开业' : item.status === 1 ? '审核中' : '停用中' }}
                                </view>
                            </view>
                            <view class="right">
                                <view class="flex-space-between">
                                    <view class="name">{{ item.storeName }}</view>
                                    <view class="about">
                                        <view class="info">
                                            <view class="line">场地数量：{{ item.roomNum }}</view>
                                        </view>
                                    </view>
                                </view>
                                <view class="address">
                                    {{ item.address }}
                                    <!-- <text class="link color-primary" bindtap="goTencentMap" data-info="{{item}}">查看地图</text> -->
                                </view>
                                <text class="status yellow" style="width: 260rpx; padding: 0rpx 10rpx">门店ID：{{ item.storeId }}</text>
                            </view>
                        </view>

                        <van-divider
                            class="divider"
                            contentPosition="center"
                            customStyle="color: #108ee9;"
                            @tap.native="foldTap($event, { index: item.storeId })"
                            :data-index="item.storeId"
                        >
                            {{ foldIndex === item.storeId ? '隐藏' : '显示管理功能' }}
                        </van-divider>

                        <view :class="'btns ' + (foldIndex === item.storeId ? 'show' : '')">
                            <navigator class="btn orage" :url="'../setStoreInfo/setStoreInfo?storeId=' + item.storeId">信息修改</navigator>
                            <view class="btn orage" @tap="meituanScope" :data-id="item.storeId">美团授权</view>
                            <view class="btn orage" @tap="douyinScope" :data-id="item.storeId">抖音授权</view>
                            <navigator class="btn orage" :url="'../setDoorList/setDoorList?storeId=' + item.storeId">房间管理</navigator>
                            <view class="btn green" :data-src="item.qrCode" @tap="previewImage">门店二维码</view>
                            <view class="btn green" @tap="queryLockPwd" :data-lockdata="item.lockData">查询锁密码</view>
                            <view class="btn green" @tap="setLockPwdShowFun" :data-lockdata="item.lockData">设置锁密码</view>
                            <view class="btn green" @tap="openStoreDoor" :data-info="item.storeId">开大门</view>
                            <navigator class="btn yellow" :url="'../setDiscount/setDiscount?storeId=' + item.storeId">充值优惠</navigator>
                            <navigator class="btn yellow" :url="'../setStoreSound/setStoreSound?storeId=' + item.storeId">自定义播报</navigator>
                            <navigator class="btn yellow" :url="'../faceBlacklist/faceBlacklist?storeId=' + item.storeId">人脸黑名单</navigator>
                            <navigator class="btn yellow" :url="'../faceRecord/faceRecord?storeId=' + item.storeId">人脸识别记录</navigator>
                        </view>
                    </view>
                </view>
            </block>
            <block v-else>
                <view class="nodata">暂无数据</view>
            </block>
        </view>
        <!-- 底部按钮 -->
        <navigator url="../setStoreInfo/setStoreInfo" :class="'bottom bg-primary ' + (isIpx ? 'fix-iphonex-button' : '')">新增门店</navigator>

        <van-dialog use-slot title="设置门锁密码" :show="setLockPwdShow" show-cancel-button confirm-button-text="确认" @confirm="confirmSetLockPwd">
            <view class="dialog">
                <view class="item" style="align-items: center">
                    <label>新管理员密码：</label>
                    <input v-model="lockPwd" type="number" maxlength="8" style="border: 1px solid var(--main-color)" placeholder="请输入6-8纯数字密码" />
                </view>
            </view>
        </van-dialog>
    </view>
</template>

<script>
// pages/store/store.js
// 获取应用实例
const app = getApp();
var http = require('../../../utils/http');
var util1 = require('../../../utils/util.js');
var lock = require('../../../utils/lock.js');
export default {
    data() {
        return {
            MainList: [],

            //列表数组
            canLoadMore: true,

            //是否还能加载更多
            pageNo: 1,

            name: '',
            setLockPwdShow: false,
            lockData: '',
            isIpx: app.globalData.isIpx ? true : false,
            foldIndex: -1,
            lockPwd: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.getListData('refresh');
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        // this.getListData('refresh');
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        let that = this;
        this.setData({
            MainList: [],
            //列表数组
            canLoadMore: true,
            //是否还能加载更多
            pageNo: 1
        });
        this.getListData('refresh');
        uni.stopPullDownRefresh();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        let that = this;
        if (that.canLoadMore) {
            that.pageNo++;
            this.getListData('');
        } else {
            uni.showToast({
                title: '我是有底线的...'
            });
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        foldTap(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            console.log(e);
            const { target: { dataset = {} } = {} } = e;
            this.setData({
                foldIndex: this.foldIndex === dataset.index ? -1 : dataset.index
            });
        },

        //获取列表数据
        getListData: function (e) {
            var that = this;
            let message = '';
            if (app.globalData.isLogin) {
                if (e == 'refresh') {
                    //刷新，page变为1
                    message = '正在加载';
                    that.setData({
                        pageNo: 1
                    });
                }
                http.request(
                    '/member/store/getPageList',
                    '1',
                    'post',
                    {
                        pageNo: that.pageNo,
                        pageSize: 10,
                        name: that.name
                    },
                    app.globalData.userDatatoken.accessToken,
                    message,
                    function success(info) {
                        console.info('返回111===');
                        console.info(info);
                        if (info.code == 0) {
                            if (e == 'refresh') {
                                that.setData({
                                    MainList: info.data.list
                                });
                                if (info.data.list.length === 0) {
                                    that.setData({
                                        canLoadMore: false
                                    });
                                }
                            } else {
                                if (info.data != null && info.data.list.length <= info.data.total) {
                                    that.setData({
                                        canLoadMore: false
                                    });
                                }
                                let arr = that.MainList;
                                let arrs = arr.concat(info.data.list);
                                that.setData({
                                    MainList: arrs
                                });
                            }
                        } else {
                            uni.showModal({
                                content: info.msg,
                                showCancel: false
                            });
                        }
                    },
                    function fail(info) {}
                );
            } else {
                uni.showModal({
                    content: '请您先登录，再重试！',
                    showCancel: false
                });
            }
        },

        // 搜索
        search: function () {
            this.getListData('refresh');
        },

        previewImage(e) {
            var currentUrl = e.currentTarget.dataset.src; //获取当前点击图片链接
            uni.previewImage({
                urls: [currentUrl]
            });
        },

        // 获取门店详情
        getData: function (storeId) {
            var that = this;
        },

        //美团授权跳转
        meituanScope: function (e) {
            let storeId = e.currentTarget.dataset.id;
            http.request(
                '/member/store/getGroupPayAuthUrl',
                '1',
                'post',
                {
                    storeId: storeId,
                    groupPayType: 1
                },
                app.globalData.userDatatoken.accessToken,
                '',
                function success(info) {
                    if (info.code == 0) {
                        uni.showModal({
                            title: '提示',
                            content: '请点击复制按钮,然后打开系统浏览器,并粘贴链接打开! 完成授权流程',
                            confirmText: '复制',
                            complete: (res) => {
                                if (res.confirm) {
                                    uni.setClipboardData({
                                        data: info.data,
                                        success: function (res) {
                                            uni.showToast({
                                                title: '已复制到剪贴板！'
                                            });
                                        }
                                    });
                                } else if (res.cancel) {
                                    //console.log('用户点击取消')
                                }
                            }
                        });
                    } else {
                        uni.showModal({
                            content: info.msg,
                            showCancel: false
                        });
                    }
                },
                function fail(info) {}
            );
        },

        //抖音授权跳转
        douyinScope: function (e) {
            let storeId = e.currentTarget.dataset.id;
            http.request(
                '/member/store/getGroupPayAuthUrl',
                '1',
                'post',
                {
                    storeId: storeId,
                    groupPayType: 2
                },
                app.globalData.userDatatoken.accessToken,
                '',
                function success(info) {
                    if (info.code == 0) {
                        uni.showModal({
                            title: '提示',
                            content: '请点击复制按钮,然后打开系统浏览器,并粘贴链接打开! 完成授权流程',
                            confirmText: '复制',
                            complete: (res) => {
                                if (res.confirm) {
                                    uni.setClipboardData({
                                        data: info.data,
                                        success: function (res) {
                                            uni.showToast({
                                                title: '已复制到剪贴板！'
                                            });
                                        }
                                    });
                                } else if (res.cancel) {
                                    //console.log('用户点击取消')
                                }
                            }
                        });
                    } else {
                        uni.showModal({
                            content: info.msg,
                            showCancel: false
                        });
                    }
                },
                function fail(info) {}
            );
        },

        // 打开大门
        openStoreDoor: function (e) {
            let id = e.currentTarget.dataset.info;
            var that = this;
            // console.info(id);
            http.request(
                '/member/store/openStoreDoor/' + id,
                '1',
                'post',
                {
                    id: id
                },
                app.globalData.userDatatoken.accessToken,
                '',
                function success(info) {
                    console.info(info);
                    if (info.code == 0) {
                        uni.showToast({
                            title: '操作成功',
                            icon: 'success'
                        });
                    } else {
                        uni.showModal({
                            content: info.msg,
                            showCancel: false
                        });
                    }
                },
                function fail(info) {}
            );
        },

        // 查看地图
        goTencentMap(e) {
            var store = e.currentTarget.dataset.info;
            this.goMap(store);
        },

        // 打开地图
        goMap(store) {
            let that = this;
            uni.openLocation({
                latitude: store.lat,
                longitude: store.lon,
                name: store.storeName,
                address: store.address,
                scale: 28
            });
        },

        queryLockPwd: function (e) {
            let that = this;
            let lockData = e.currentTarget.dataset.lockdata;
            if (lockData) {
                lock.queryLockPwd(lockData);
            } else {
                uni.showToast({
                    title: '未使用密码锁',
                    icon: 'error'
                });
            }
        },

        //设置密码锁密码
        setLockPwdShowFun: function (e) {
            let that = this;
            var lockData = e.currentTarget.dataset.lockdata;
            if (lockData) {
                that.setData({
                    setLockPwdShow: true,
                    lockData: lockData
                });
            } else {
                uni.showToast({
                    title: '未使用密码锁',
                    icon: 'error'
                });
            }
        },

        confirmSetLockPwd: function (e) {
            var that = this;
            var lockData = that.lockData;
            if (lockData) {
                if (!that.lockPwd || that.lockPwd < 100000) {
                    uni.showToast({
                        title: '密码不合法',
                        icon: 'error'
                    });
                } else {
                    lock.setLockPwd(lockData, that.lockPwd);
                    that.setData({
                        setLockPwdShow: false,
                        lockData: ''
                    });
                }
            } else {
                uni.showToast({
                    title: '未使用密码锁'
                });
            }
        }
    }
};
</script>
<style>
@import './setStore.css';
</style>
